<template>
  <div class="box">
    <div class="table-oper">
      <el-button-group class="oper-left">
       <el-button type="primary" @click="addVisibleDialog">新增</el-button>
       <el-button type="primary" @click="deleteBatch">批量删除</el-button>
      </el-button-group>
    <el-form :inline="true" :model="examlabel" class="oper-right">
    <el-form-item label="标签名">
      <el-input v-model="examlabel.labelname" placeholder="请输入评测标签" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </el-form-item>
  </el-form>
  </div>
  <el-table :data="list.data" border style="width: 100%"  @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="labelname" label="标签名"  />
    <el-table-column fixed="right" label="操作" width="160" >
      <template #default="scope" >
        <el-button link type="primary" size="small"  @click="editVisibleDialog(scope.row)" icon="Edit"> 编辑</el-button>
        <el-button link type="primary" size="small" @click="delLabel(scope.$index,scope.row)" icon="Delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :background="true"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination"
    />

    <examlabel-add  v-if="addVisible" :visibleModel="addVisible" @addVisible="addVisibleDialog"></examlabel-add>
    <examlabel-edit v-if="editVisible" :visibleModel="editVisible" :id="editId" @editVisible="editVisibleDialog"></examlabel-edit>
  </div>
  
  
</template>

<script setup>
import userApi from '@/api/exam/examlabel.js'

import ExamlabelEdit from '@/views/examlabel/ExamLabelEdit.vue'
import ExamlabelAdd from '@/views/examlabel/ExamLabelAdd.vue'

import { ElMessageBox } from 'element-plus'
import {ref,reactive,onMounted} from 'vue'
   //将数组数据包含成一个对象
   let list=reactive({data:[]});
   let examlabel=reactive({labelname:""});
   let currentPage=ref(1);
   let pageSize=ref(5);
   let total=ref(0);

   let addVisible=ref(false);
   let editVisible=ref(false);
   let editId=ref(0);

   let selectedList=ref({});
   
   onMounted(()=>{
    let params={pageNum:currentPage.value,pageSize:pageSize.value,labelname:examlabel.labelname}
    userApi.list(params).then(response=>{
      list.data=response.data.data.rows;
      total.value=response.data.data.total;
    
    })
   });

   //查询方法
   function onSearch(){
    let params={pageNum:currentPage.value,pageSize:pageSize.value,labelname:examlabel.labelname}
    userApi.list(params).then(response=>{
      console.log(response);
      list.data=response.data.data.rows;
      total.value=response.data.data.total;
    })
   };
   //切换分页方法
  function handleCurrentChange(number){
    let params={pageNum:number,pageSize:pageSize.value,labelname:examlabel.labelname}
    userApi.list(params).then(response=>{
      console.log(response);
      list.data=response.data.data.rows;
      total.value=response.data.data.total;
    })
   }
   //删除功能
   let delLabel=(index,row)=>{
     ElMessageBox.confirm(
    '确定要删除吗',
    '提示',
    {confirmButtonText: '确定',cancelButtonText: '返回',type: 'warning'}
  ).then(() => {
       userApi.delete(row.id).then(response=>{
         list.data.splice(index,1);
       })
    })
   };
   let deleteBatch=()=>{
    ElMessageBox.confirm(
    '确定要删除吗',
    '提示',
    {confirmButtonText: '确定',cancelButtonText: '返回',type: 'warning'}
  ).then(() => {
        let ids=[];
        console.log(selectedList)
        selectedList.value.forEach((row,index)=>{
          ids.push(row.id);
        });
       userApi.deleteBatch(ids).then(response=>{
        onSearch();
       })
    })
   }
  let handleSelectionChange=(val)=>{
    selectedList.value = val
  }
   //打开关闭新增对话框
   let addVisibleDialog=()=>{
     addVisible.value=addVisible.value==false?true:false;
   }
   //打开关闭编辑对话框
   let editVisibleDialog=(row)=>{
     if(row!=null){
       editId=row.id;
       console.log(row);
     }
     editVisible.value=editVisible.value==false?true:false;
   }

</script>

<style scoped>
.box{
  margin-top:30px;
}
.pagination{
  margin-top:15px;
}
.oper-left{
  float:left;
}
.oper-right{
  float: right;
}
</style>